<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>瀑布流</title>
    <style>
        * {
            padding: 0;
            margin: 0
        }

        /*给大盒子添加样式*/

        #con {
            width: 980px;
            margin: 60px auto;
            border-radius: 25px;
            box-shadow: 5px 5px 10px #000;
            padding: 20px;
            /*下面代码是兼容各个浏览器的，并实现了四列，没两列之间间距为30px，*/
            /* 火狐浏览器 */
            -moz-column-count: 4;
            -moz-column-gap: 30px;
            -moz-column-rule: 0px solid #ff0000;
            /* Google chrome */
            -webkit-column-count: 4;
            -webkit-column-gap: 30px;
            -webkit-column-rule: 0px solid #ff0000;
            /* Opera浏览器的 */
            -o-column-count: 4;
            -o-column-gap: 30px;
            -o-column-rule: 0px solid #ff0000;
        }

        /*小盒子内容区的样式，display:inline-block：实现 效果*/

        #con .pic {
            width: 188px;
            min-height: 100px;
            box-shadow: 2px 2px 6px #b5b5b5;
            padding: 20px 15px;
            margin: 10px;
            display: inline-block;
        }

        #con h3 {
            border-bottom: 1px solid #ddd;
            line-height: 30px;
            text-align: center;
            padding: 5px 5px;
        }

        #con h3 a {
            text-decoration: none;
            color: #999;
        }

        #con p {
            font-size: 12px;
            color: #666;
            line-height: 20px;
            white-space: nowrap;
            overflow: hidden;
            /*很多文字，一行显示不下，用省略号显示的代码*/
            text-overflow: ellipsis;
            -o-text-overflow: ellipsis;
            -moz-text-overflow: ellipsis;
            -webkit-text-overflow: ellipsis;
        }

        img {
            width: 100%;
            height: auto;
        }
    </style>
</head>

<body>
    <div id="con">

        <div class="pic">
            <img src="https://placekitten.com/g/600/600" />
            <h3>
                <a href="#">野蛮生长</a>
            </h3>
            <p>人长大的标志：试着听从自己内心的声音，而不去在乎外面的声 音，等待和拖延是世界上最容易压垮一个人得东西。犹豫不决是你 最大的敌人。能看书就不要发呆，能碎觉就不要拖延，能吃饭就不 要饿着，能亲吻就不要说话，能找到自己想做的事情就不容易了，
                青春得浪费在美好事物上。
            </p>
        </div>
        <div class="pic">
            <img src="https://placekitten.com/g/800/600" />
            <h3>
                <a href="#">野蛮生长</a>
            </h3>
            <p>人长大的标志：试着听从自己内心的声音，而不去在乎外面的声 音，等待和拖延是世界上最容易压垮一个人得东西。犹豫不决是你 最大的敌人。能看书就不要发呆，能碎觉就不要拖延，能吃饭就不 要饿着，能亲吻就不要说话，能找到自己想做的事情就不容易了，
                青春得浪费在美好事物上。
            </p>
        </div>
        <div class="pic">
            <img src="https://placekitten.com/g/400/600" />
            <h3>
                <a href="#">野蛮生长</a>
            </h3>
            <p>人长大的标志：试着听从自己内心的声音，而不去在乎外面的声 音，等待和拖延是世界上最容易压垮一个人得东西。犹豫不决是你 最大的敌人。能看书就不要发呆，能碎觉就不要拖延，能吃饭就不 要饿着，能亲吻就不要说话，能找到自己想做的事情就不容易了，
                青春得浪费在美好事物上。
            </p>
        </div>
        <div class="pic">
            <img src="https://placekitten.com/g/300/300" />
            <h3>
                <a href="#">野蛮生长</a>
            </h3>
            <p>人长大的标志：试着听从自己内心的声音，而不去在乎外面的声 音，等待和拖延是世界上最容易压垮一个人得东西。犹豫不决是你 最大的敌人。能看书就不要发呆，能碎觉就不要拖延，能吃饭就不 要饿着，能亲吻就不要说话，能找到自己想做的事情就不容易了，
                青春得浪费在美好事物上。
            </p>
        </div>
        <div class="pic">
            <img src="https://placekitten.com/g/200/400" />
            <h3>
                <a href="#">野蛮生长</a>
            </h3>
            <p>人长大的标志：试着听从自己内心的声音，而不去在乎外面的声 音，等待和拖延是世界上最容易压垮一个人得东西。犹豫不决是你 最大的敌人。能看书就不要发呆，能碎觉就不要拖延，能吃饭就不 要饿着，能亲吻就不要说话，能找到自己想做的事情就不容易了，
                青春得浪费在美好事物上。
            </p>
        </div>
        <div class="pic">
            <img src="https://placekitten.com/g/500/800" />
            <h3>
                <a href="#">野蛮生长</a>
            </h3>
            <p>人长大的标志：试着听从自己内心的声音，而不去在乎外面的声 音，等待和拖延是世界上最容易压垮一个人得东西。犹豫不决是你 最大的敌人。能看书就不要发呆，能碎觉就不要拖延，能吃饭就不 要饿着，能亲吻就不要说话，能找到自己想做的事情就不容易了，
                青春得浪费在美好事物上。
            </p>
        </div>
        <div class="pic">
            <img src="https://placekitten.com/g/600/300" />
            <h3>
                <a href="#">野蛮生长</a>
            </h3>
            <p>人长大的标志：试着听从自己内心的声音，而不去在乎外面的声 音，等待和拖延是世界上最容易压垮一个人得东西。犹豫不决是你 最大的敌人。能看书就不要发呆，能碎觉就不要拖延，能吃饭就不 要饿着，能亲吻就不要说话，能找到自己想做的事情就不容易了，
                青春得浪费在美好事物上。
            </p>
        </div>
        <div class="pic">
            <img src="https://placekitten.com/g/800/500" />
            <h3>
                <a href="#">野蛮生长</a>
            </h3>
            <p>人长大的标志：试着听从自己内心的声音，而不去在乎外面的声 音，等待和拖延是世界上最容易压垮一个人得东西。犹豫不决是你 最大的敌人。能看书就不要发呆，能碎觉就不要拖延，能吃饭就不 要饿着，能亲吻就不要说话，能找到自己想做的事情就不容易了，
                青春得浪费在美好事物上。
            </p>
        </div>
        <div class="pic">
            <img src="https://placekitten.com/g/300/400" />
            <h3>
                <a href="#">野蛮生长</a>
            </h3>
            <p>人长大的标志：试着听从自己内心的声音，而不去在乎外面的声 音，等待和拖延是世界上最容易压垮一个人得东西。犹豫不决是你 最大的敌人。能看书就不要发呆，能碎觉就不要拖延，能吃饭就不 要饿着，能亲吻就不要说话，能找到自己想做的事情就不容易了，
                青春得浪费在美好事物上。
            </p>
        </div>
        <div class="pic">
            <img src="https://placekitten.com/g/600/600" />
            <h3>
                <a href="#">野蛮生长</a>
            </h3>
            <p>人长大的标志：试着听从自己内心的声音，而不去在乎外面的声 音，等待和拖延是世界上最容易压垮一个人得东西。犹豫不决是你 最大的敌人。能看书就不要发呆，能碎觉就不要拖延，能吃饭就不 要饿着，能亲吻就不要说话，能找到自己想做的事情就不容易了，
                青春得浪费在美好事物上。
            </p>
        </div>
        <div class="pic">
            <img src="https://placekitten.com/g/300/200" />
            <h3>
                <a href="#">野蛮生长</a>
            </h3>
            <p>人长大的标志：试着听从自己内心的声音，而不去在乎外面的声 音，等待和拖延是世界上最容易压垮一个人得东西。犹豫不决是你 最大的敌人。能看书就不要发呆，能碎觉就不要拖延，能吃饭就不 要饿着，能亲吻就不要说话，能找到自己想做的事情就不容易了，
                青春得浪费在美好事物上。
            </p>
        </div>
        <div class="pic">
            <img src="https://placekitten.com/g/600/600" />
            <h3>
                <a href="#">野蛮生长</a>
            </h3>
            <p>人长大的标志：试着听从自己内心的声音，而不去在乎外面的声 音，等待和拖延是世界上最容易压垮一个人得东西。犹豫不决是你 最大的敌人。能看书就不要发呆，能碎觉就不要拖延，能吃饭就不 要饿着，能亲吻就不要说话，能找到自己想做的事情就不容易了，
                青春得浪费在美好事物上。
            </p>
        </div>
        <div class="pic">
            <img src="https://placekitten.com/g/500/800" />
            <h3>
                <a href="#">野蛮生长</a>
            </h3>
            <p>人长大的标志：试着听从自己内心的声音，而不去在乎外面的声 音，等待和拖延是世界上最容易压垮一个人得东西。犹豫不决是你 最大的敌人。能看书就不要发呆，能碎觉就不要拖延，能吃饭就不 要饿着，能亲吻就不要说话，能找到自己想做的事情就不容易了，
                青春得浪费在美好事物上。
            </p>
        </div>
    </div>
</body>

</html>